<template>
	<view>
		<pageheader :setting="settingdata"></pageheader>
		<view class="supplierone">
			<image class="headimg" :src="detail.shop_logo"></image>
			<view class="oneinfo">
				<view class="namedes">
					<text class="clamp2">{{detail.shop_name}}</text>
					<view class="xinyong_box">
						<image :src="detail.mimage" v-if="detail.mimage" mode="widthFix"></image>
						<view class="xin">信</view>
						<view class="xin_number">{{detail.credit_value}}</view>
						<block v-for="(item,index) in detail.authentication" :key="index">
							<view class="shiming" v-if="item.realname=='实'">实</view>
						</block>
					</view>
				</view>
				<view class="onedes">{{detail.address}} 距离 {{detail.distance}}km</view>
				<text class="recently">近期采购 {{detail.purchase_num}} 单</text>
			</view>

			<view @click="attention" :class="detail.is_follow?'attention opt':'attention'">
				{{detail.is_follow==1?'已关注':'+ 关注'}}
			</view>
		</view>
		<view class="detailcontent">
			<view class="areaOne">
				<view class="Lineone">
					<view class="Linetitle">货品名称</view>
					<view class="Linevalue">
						<view class="value_line">{{detail.titles}}</view>
					</view>
				</view>
				<view class="Lineone">
					<view class="Linetitle">求购数量</view>
					<view class="Linevalue">
						<view class="value_line">{{detail.number}}{{detail.unit}}</view>
					</view>
				</view>
				<view class="Lineone">
					<view class="Linetitle">求购单价</view>
					<view class="Linevalue">
						<view class="value_line" style="color:rgb(56,190,140)">{{detail.money}}元</view>
					</view>
				</view>
				<view class="Lineone">
					<view class="Linetitle">货品规格</view>
					<view class="Linevalue">
						<block v-for="(item,index) in detail.spec" :key="index">
							<view class="value_line">{{index}}：{{item}}</view>
						</block>
					</view>
				</view>
			</view>
			<view class="areaOne">
				<view class="Lineone">
					<view class="Linetitle">求购地区</view>
					<view class="Linevalue">
						<view class="value_line">{{detail.city}}</view>
					</view>
				</view>
				<view class="Lineone">
					<view class="Linetitle">收货地址</view>
					<view class="Linevalue">
						<view class="value_line">{{detail.address}}</view>
					</view>
				</view>
				<view class="Lineone">
					<view class="Linetitle">截止时间</view>
					<view class="Linevalue">
						<view class="value_line">{{detail.stoptime}}</view>
					</view>
				</view>
				<view class="Lineone">
					<view class="Linetitle">备注</view>
					<view class="Linevalue">
						<view class="value_line">{{detail.content}}</view>
					</view>
				</view>
			</view>
			<view class="photostitle">求购样图</view>
			<view class="photobox">
				<u-row gutter="12">
					<u-col span="4" v-for="(item,index) in detail.images" :key="index">
						<image :src="item" mode="aspectFill" @click="$plug.showImg(detail.images,item)"></image>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="detailbottoms">
			<view class="detail_btn" @click="$plug.dialing(detail.mobile)">
				<text class="iconfont icon-dianhua1"></text>
				<text class="detail_btn_title">联系买家</text>
			</view>
			<!-- <navigator url="/chat/chatingroom" hover-class="none" class="detail_btn">
				<text class="iconfont icon-dilanxianxingiconyihuifu_huabanfuben"></text>
				<text class="detail_btn_title">聊一聊</text>
			</navigator> -->
			<view class="detail_btn" @click="sharegood">
				<!-- <button open-type="share"></button> -->
				<text class="iconfont icon-zhuanfa">
					<u-icon name="share" color="#999999" size="40"></u-icon>
				</text>
				<text class="detail_btn_title">分享</text>
				
				<!-- <text class="share">分享</text> -->
			</view>
			<view class="detail_btn" @click="chat(detail)">
				<text class="iconfont icon-dilanxianxingiconyihuifu_huabanfuben"></text>
				<text class="detail_btn_title">聊一聊</text>
			</view>

			<view class="limitbtn" :style="is_bj=='false'?'':'background: #eee;'" @click="togetgood(detail.id)"
				v-if="is_bj=='false'">
				立即报价
			</view>
			<view class="limitbtn" v-else style="background: #eee;">已报价</view>

		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				settingdata: {
					name: '求购详情',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "wantedetail"
				},
				imgdata: [0, 0, 0, 0, 0],
				id: 0,
				detail: {},
				is_bj: 'false'
			}
		},
		onLoad(options) {
			_this = this
			_this.id = options.id
			console.log(options)
			if (options.is_bj) {
				_this.is_bj = options.is_bj
			}
		},

		onShow() {
			_this.getdata()
		},
		methods: {
			// 获取数据
			getdata() {
				_this.$api.get("demanddetail", {
					detail_id: _this.id,
					lon: uni.getStorageSync("address").long,
					lat: uni.getStorageSync("address").lat,
					client_uid: uni.getStorageSync("client_uid") ? uni.getStorageSync("client_uid") : 0,
				}).then(data => {
					_this.detail = data
				});
			},

			// 关注
			attention(e) {
				// _this.click_shake(function() {
				// })
				_this.$api.islogin(() => {
					_this.$api.get("savefollow", {
						select_type: 1,
						types: 3,
						id: _this.detail.client_uid
					}).then(data => {
						// _this.detail.is_follow = _this.detail.is_follow == 0 ? 1 : 0
						_this.getdata()
					});
				})
			},

			//是否可以跳转到报价页面
			togetgood(id) {
				_this.$api.get("checkApi", {
					detail_id: id,
					lon: uni.getStorageSync("address").long,
					lat: uni.getStorageSync("address").lat,
					type: 1,
					client_uid: uni.getStorageSync("client_uid") ? uni.getStorageSync("client_uid") : ''
				}).then(data => {
					console.log(data)
					uni.navigateTo({
						url: "/home/index/wanted?id=" + id
					})

				});
			},

			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 500)
				}
			},

			// 跳转到聊天
			chat(obj) {
				console.log(obj)
				wx.setStorageSync('list', obj)

				uni.navigateTo({
					url: '../../chat/chatingroom?type=4' + '&member_type=1'
				})
			},
			// 分享
			sharegood() {
				console.log(111111)
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession", //分享到聊天界面
					type: 5,
					imageUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/962fc340-4f2c-11eb-bdc1-8bd33eb6adaa.png',
					title: '求购：'+_this.detail.titles,
					miniProgram: {
						id: 'gh_57154cd1b0ae', //微信小程序原始id
						path: "/home/index/wantedetail?id=" + _this.id, //点击链接进入的页面
						type: 2, //微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
						webUrl: '/pages/index/index' //兼容低版本的网页链接
					},
					success: res => {
						console.log(JSON.stringify(res));
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.supplierone {
		padding: 42rpx 44rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-bottom: 10rpx solid #F2F2F2;

		.headimg {
			width: 108rpx;
			height: 108rpx;
			border-radius: 50%;
		}

		.attention {
			width: 107rpx;
			background: #38be8c;
			border-radius: 40rpx;
			text-align: center;
			border: 1rpx solid #38be8c;
			padding: 6rpx 0;
			font-size: 26rpx;
			color: #FFFFFF;
			margin-left: 30rpx;
		}

		.attention.opt {
			color: #38be8c;
			background-color: #FFFFFF;
		}

		.oneinfo {
			margin-left: 17rpx;
			flex: 1;
			display: flex;
			flex-direction: column;

			.namedes {
				text {
					color: #333333;
					font-size: 32rpx;
				}

				image {
					height: 36rpx;
					margin-right: 12rpx;
					max-width: 120rpx;
				}

				.xinyong_box {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 10rpx;

					.xin {
						width: 30rpx;
						height: 30rpx;
						background: #00C575;
						border-radius: 3px 0 0 3rpx;
						text-align: center;
						line-height: 30rpx;
						color: #fff;
						font-size: 20rpx;
					}

					.xin_number {
						background-color: #fff;
						border: 2rpx solid #00C575;
						border-radius: 0 3rpx 3rpx 0;
						color: #00C575;
						font-size: 20rpx;
						text-align: center;
						height: 30rpx;
						line-height: 30rpx;
						min-width: 46rpx;
					}
				}
			}

			.onedes {
				margin-top: 26rpx;
				color: #858585;
				font-size: 24rpx;
			}

			.recently {
				margin-top: 10rpx;
				color: #858585;
				font-size: 24rpx;
			}
		}
	}

	.detailcontent {
		margin: 0 25rpx;
		padding-bottom: 98rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 98rpx);
		display: flex;
		flex-direction: column;

		.areaOne {
			border-bottom: 2rpx solid #E6E6E6;

			.Lineone {
				padding: 20rpx 0;
				display: flex;
				flex-direction: row;

				.Linetitle {
					width: 130rpx;
					color: #888888;
					font-size: 30rpx;
					display: block;
					text-align: justify;
					text-align-last: justify;
				}

				.Linevalue {
					margin-left: 82rpx;
					display: flex;
					flex-direction: column;
					flex: 1;

					.value_line {
						color: #333333;
						font-size: 30rpx;
					}
				}
			}
		}

		.photostitle {
			margin-top: 37rpx;
			color: #888888;
			font-size: 30rpx;
		}

		.photobox {
			margin-top: 30rpx;

			image {
				width: 207rpx;
				height: 207rpx;
				border-radius: 5rpx;
			}
		}
	}

	.detailbottoms {
		height: 98rpx;
		height: calc(env(safe-area-inset-bottom) + 98rpx);
		display: flex;
		padding-bottom: env(safe-area-inset-bottom);
		flex-direction: row;
		align-items: center;
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		box-shadow: 0 4rpx 16rpx 0 rgba(184, 179, 179, 0.25);

		.detail_btn {
			margin-left: 44rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.iconfont {
				font-size: 38rpx;
				color: #666666;
			}

			.detail_btn_title {
				margin-top: 7rpx;
				font-size: 20rpx;
				color: #666666;
			}
		}

		.limitbtn {
			margin-left: 44rpx;
			height: 74rpx;
			width: 360rpx;
			background: linear-gradient(86deg, #38BE8C, #05ADBB);
			border-radius: 37rpx 37rpx 37rpx 37rpx;
			text-align: center;
			line-height: 74rpx;
			color: #fff;
			font-size: 30rpx;
			font-weight: bold;
		}
	}
</style>
